/**
 * Created by xt on 2017/3/29.
 */
require('./index.scss') ;
import classNames  from 'classnames';
import React, { Component } from 'react'

import Select from '../../components/select'
import School from '../../components/selectSchool'
import Modal from '../../components/modal'
import Loading from '../../components/loading'

import {fetch_school, fetch_report} from './data'


let provenc = [
  {id:10, name: '贵州'}
];
let lock = false;
let timer;
class Index extends Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  constructor(props) {
    super(props);
    this.state = {
      isSearch: false,
      selectProvince: '贵州',
      provinceId: 10,
      scoreType : 1,
      scoreName : '文科',
      sourceW: true, //默认文科选中
      sourceL: false, //默认理科未选中
      schoolData: [],
      inputSchool: null,
      universityId : null,
      searchSchool: false,
      score: undefined,
      content: '' , //提示内容
      showModal: false,
      loading: false,
      noFindSchool: false

    };
    this.search = this.search.bind(this);
    this.searchSchool = this.searchSchool.bind(this);
    this.changeProvince = this.changeProvince.bind(this);
    this.chooseSchool = this.chooseSchool.bind(this);
    this.score = this.score.bind(this);
    this.getReport = this.getReport.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.closeSearchSchool = this.closeSearchSchool.bind(this);
  }
/*
*   搜索省份
* */

  search () {
    this.setState({
      isSearch: !this.state.isSearch
    })
  }
//选择省份
  changeProvince () {
    return (index) => {
      this.setState({
        selectProvince: index.target.outerText,
        provinceId : index.target.attributes[0].value
      })
    }
  }
  /**
   *        选择学科
   *
   * */
  chooseSubjectL (e) {
    this.setState({
      scoreType  : e.target.attributes[1].value,
      scoreName  : e.target.outerText,
      sourceL: true,
      sourceW: false
    })
  }
  chooseSubjectW (e) {
    this.setState({
      scoreType  : e.target.attributes[1].value,
      scoreName  : e.target.outerText,
      sourceL: false,
      sourceW: true
    })
  }
  /**
   *  获取分数
   * */
  score (e) {
    this.setState({
      score: e.target.value
    })
  }
  /*
  *
  *模糊搜索学校
  *
  * */
  searchSchool (e) {
    clearTimeout(timer);
     timer = setTimeout(function () {
      lock = true
    }, 200);
    if (!lock) {
      return false
    } else {
      let parmas = e.target.innerHTML;
      if (parmas && parmas !== "") {
        fetch_school(parmas).then((res) => {
          if (res.datas.length > 0) {
            this.setState({
              schoolData: res.datas,
              searchSchool: true,
              noFindSchool: false
            })
          } else {
            this.setState({
              searchSchool: false,
              noFindSchool: true,
              universityId: null
            })
          }
        })
      } else {
        this.setState({
          searchSchool: false,
        })
      }
      lock = false;
    }
  }
//选择学校
  chooseSchool () {
      return (index) => {
        this.setState({
          inputSchool: index.target.outerText,
          universityId  : index.target.attributes[0].value,
          searchSchool: !this.state.searchSchool
        })
      }
  }

  closeSearchSchool () {
    this.setState({
      searchSchool: false
    })
  }
/**
 *   生成报告
 * */
  getReport () {

    let parmas = {};
    parmas.provinceId = parseInt(this.state.provinceId);
    parmas.scoreType  = parseInt(this.state.scoreType);
    parmas.score   = parseInt(this.state.score) ;
    parmas.universityId    = parseInt(this.state.universityId);

    if (!parmas.score || parmas.score <= 300) {
       this.setState({
         showModal: true,
         content: '请填写300以上的分数!'
       });
      return;
    }
    if (!parmas.score || parmas.score > 750) {
      this.setState({
        showModal: true,
        content: '请填写750以下的分数!'
      });
      return;
    }
    if (!parmas.universityId) {
      this.setState({
        showModal: true,
        content: '请选择一所学校!'
      });
      return;
    }
    this.setState({
      loading: true
    });
    let timeout = setTimeout(() => {
      this.context.router.push('404');
      return false;
    },10000);
    fetch_report(parmas).then((res) => {
      clearTimeout(timeout);
      let info = res;
      res.province = this.state.selectProvince;
      res.score = this.state.score;
      res.scoreName = this.state.scoreName;
      sessionStorage.setItem('info', JSON.stringify(res));
      this.setState({
        loading: false
      });
      this.context.router.push('report');
    })
  }
  //关闭modal
  closeModal () {
    return () => {
      this.setState({
        showModal: false
      });
    }
  }

  render () {
    let itemClassesL = classNames({
      active: this.state.sourceL
    });
    let itemClassesW = classNames({
      active: this.state.sourceW
    });
    let submitStyle = classNames('link-btn',{
      disabled: !this.state.score && !this.state.universityId
    });
    return (
      <div className="index-top-box">
          <div className="index-top" onClick={this.closeSearchSchool}>
            <p>请输入你的联考成绩和目标学校</p>
            <div className="index-top-form">
              <div className="float index-top-input" onClick = {this.search}>
                    <i className="icon-map left"></i>
                    <span className="left">{this.state.selectProvince}</span>
                    <i className="icon-select-down right"></i>
                  {this.state.isSearch && <Select province={provenc} changeProvince={this.changeProvince}/>}
              </div>
              <div className="float index-top-button">
                  <span className={itemClassesL} data-id="2" onClick={(e) => this.chooseSubjectL(e)}>理科</span>
                  <span className={itemClassesW} data-id="1" onClick={(e) => this.chooseSubjectW(e)}>文科</span>
              </div>
              <div className="float index-top-input" style={{paddingRight:"0"}}>
                <i className="icon-count left"></i>
                <span className="left">你的成绩</span>
                <input type="text" placeholder="请输入你的联考成绩" onChange={(e) => this.score(e)}/>
              </div>
              <div className="float index-top-input" style={{paddingRight:"0"}} >
                <i className="icon-map left"></i>
                <span className="left">心仪大学</span>
                <div className="inputDiv" contentEditable="true"
                     placeholder="请输入你的心仪大学"
                     onInput={(e) => this.searchSchool(e)}>{this.state.inputSchool}</div>
                {this.state.searchSchool && <School school={this.state.schoolData} chooseSchool={this.chooseSchool}/>}
              </div>
              {this.state.noFindSchool &&  <p className="no-find-school">没找到大学</p>}
            </div>
            <button className={submitStyle}  onClick={this.getReport}>生成定位分析报告</button>
          </div>
        <div className="index-bottom">
          <div className="index-b-box">
            <p>分析报告内容包括：</p>
            <ul className="list-group">
              <li><i className="star"></i><a href="javascript:;">你被心仪大学录取的概率</a></li>
              <li><i className="star"></i><a href="javascript:;">你能上什么学校</a></li>
              <li><i className="star"></i><a href="javascript:;">往年与你成绩相近的考生去了哪里</a></li>
            </ul>
          </div>
        </div>
        {this.state.showModal && <Modal close={this.closeModal} content={this.state.content}/>}
        {this.state.loading &&  <Loading />}
      </div>
    )
  }

}
export default Index
